<template>
    <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中-->
    <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出-->
    <el-dialog title="支付" :visible.sync="dialogData.showEditDialog" width="450px" :label-position="labelPosition"
        :label-width="formLabelWidth" @close="cancelForm">
        <div class="block" v-if="dialogData.type == 0">
            <!-- <h2 class="demonstration">微信支付</h2> -->
            <el-image :src="src">
            </el-image>
            <li style="list-style:none ;font-size: large;">订单金额：{{ dialogData.payfor }}</li>
        </div>
        <div class="block" v-if="dialogData.type == 1">
            <!-- <h2 class="demonstration">支付宝支付</h2> -->
            <el-image :src="src1">
            </el-image>
            <li style="list-style:none ;font-size: large;">订单金额：{{ dialogData.payfor }}</li>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelForm()">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
    </el-dialog>
</template>
    
<script>

export default {
    name: 'payImage',
    props: {
        // 使用 props 属性接收父组件传递的参数
        dialogData: {
            type: Object,
            default: {
                type: '',
                payfor: "",
                showEditDialog: false,
            },
        },
    },
    data() {
        return {
            src: '/img/weixin.png',
            src1: '/img/zhifubao.png',
            // 弹出框设置项
            formLabelWidth: "280px",
            labelPosition: "right",

            user: {
                id: '',
                money: ''
            },
        }
    },
    methods: {
        cancelForm: function () {
            this.dialogData.showEditDialog = false;
        },
        //初始化数据
        data: function () {
            var tokenObject = this.$Storage.getItemForLs(this.$TestData.TOKEN_OBJECT_KEY);

            this.$Request
                .fetch("/api/rentuser/user/" + tokenObject.aud, {})
                .then((result) => {
                    this.user = result;
                   // console.log(this.user);
                })
                .catch(() => { });
        },
        submitForm: function () {

            //计算金额
            this.user.money = (this.user.money - 0) + (this.dialogData.payfor - 0);
            //console.log(this.user.money);
            this.$Request
                .fetch_("/api/rentuser/money", 'put', this.user)
                .then((res) => {
                    if (res.status === 200) {
                        // 支付方式跳转
                        if (this.dialogData.type == "0") {
                            this.$message.success("微信支付成功");
                            this.dialogData.showEditDialog = false;
                        } else if (this.dialogData.type == "1") {
                            this.$message.success("支付宝支付成功");
                            this.dialogData.showEditDialog = false;
                        }
                    }
                });



        },
    },
        mounted() {
            this.data();

        },
       

    }
    
</script>
<style>

</style>
  